<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    @close="close"
    title="事件编辑器"
    width="1000"
  >
    <div class="w-[100%] flex items-center">
      <div class="w-[700px]">
        <el-tabs v-model="activeName" type="card" @tab-click="() => {}">
          <el-tab-pane label="点击-click" name="click">
            <AceEditor
              :value="clickStr"
              @change="changeclickMethod"
              @error="handleClickError"
            />
          </el-tab-pane>
          <el-tab-pane label="鼠标移入-mouseenter" name="mouseenter">
            <AceEditor
              :value="mouseenterStr"
              @change="changemouseenterMethod"
              @error="handleMouseEnterError"
            />
          </el-tab-pane>
          <el-tab-pane label="渲染之前-BeforeMount" name="BeforeMounted">
            <AceEditor
              :value="beforeMountStr"
              @change="changebeforeMountMethod"
              @error="handlBeforMountedError"
            />
          </el-tab-pane>
          <el-tab-pane label="渲染之后-mounted" name="mounted">
            <AceEditor
              :value="mountedStr"
              @change="changemountedMethod"
              @error="handleMountedError"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="flex-1 h-[570px]">
        <div
          class="flex items-center w-[100%] h-[40px] bg-[#ffffff1a] rounded-md"
        >
          <div
            @click="rightFlag = 0"
            :class="{ 'bg-[#313030]': rightFlag == 0 }"
            class="cursor-pointer w-[70px] h-[30px] text-center leading-[30px] rounded-md mx-[4px]"
          >
            代码校验
          </div>
          <div
            @click="rightFlag = 1"
            :class="{ 'bg-[#313030]': rightFlag == 1 }"
            class="cursor-pointer w-[70px] h-[30px] text-center leading-[30px] rounded-md mx-[4px]"
          >
            变量介绍
          </div>

          <div
            @click="rightFlag = 2"
            :class="{ 'bg-[#313030]': rightFlag == 2 }"
            class="cursor-pointer w-[70px] h-[30px] text-center leading-[30px] rounded-md mx-[4px]"
          >
            案例介绍
          </div>
        </div>

        <div class="px-[10px] py-[10px]" v-if="rightFlag == 0">
          <span class="text-[18px]">错误信息</span>
          <el-scrollbar height="480" v-if="currentError.length > 0">
            <div class="my-[10px]" v-for="(item, i) in currentError" :key="i">
              <div class="mb-[7px] text-[#8a8787]">
                错误详情：<span class="text-[red]"> {{ item.text }}</span>
              </div>
              <div class="text-[#8a8787]">
                错误位置：{{ item.row }}行{{ item.column }}列
              </div>
            </div>
          </el-scrollbar>
          <div v-else>暂无</div>
        </div>
        <div class="px-[10px] py-[10px]" v-if="rightFlag == 1">
          <span class="text-[18px]">变量详情</span>
          <el-scrollbar height="480" v-if="paramExplan.length > 0">
            <div class="my-[15px]" v-for="(item, i) in paramExplan" :key="i">
              <div class="mb-[7px]">
                参数名称：<span class="text-[red]"> {{ item.name }}</span>
              </div>
              <div class="text-[#8a8787]">{{ item.detail }}</div>
            </div>
          </el-scrollbar>
          <div v-else>暂无</div>
        </div>
        <div class="px-[10px] py-[10px]" v-if="rightFlag == 2">
          <el-scrollbar height="500">
            <el-collapse>
              <el-collapse-item title="案例1：获取当前组件实例" name="1">
                <div class="leading-1">console.log(e)</div>
              </el-collapse-item>
              <el-collapse-item title="案例2：获取echarts实例" name="2">
                <div>const {echarts, element} = node_modules</div>
              </el-collapse-item>
              <el-collapse-item title="案例3：获取components组件集合" name="3">
                <div>console.log(components)</div>
              </el-collapse-item>
              <el-collapse-item title="案例4：渲染之后修改图表标题" name="4">
                <div class="whitespace-break-spaces">
                  {{
                    `this.setupState.chartInstance.setOption(
            {
              title:{text:'渲染之后修改图表标题'}
            });`
                  }}
                </div>
              </el-collapse-item>
              <el-collapse-item title="案例5：点击事件中修改图表标题" name="5">
                <div>
                  {{
                    `
                  components[id].setupState
                  .chartInstance.setOption({
                      title:{text:'点击后修改的标题'}
                  })
                  `
                  }}
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import Codemirror from "./editor.vue";
import AceEditor from "./aceEditor.vue";
type PropsType = {
  layout: any;
};

let props = withDefaults(defineProps<PropsType>(), {
  layout: {},
});
let emit = defineEmits(["close", "updateData"]);
let rightFlag = ref(1);
let clickStr = ref("");
let mouseenterStr = ref("");
let beforeMountStr = ref("");
let mountedStr = ref("");

let paramExplan = ref([
  {
    name: "id",
    detail: "当前组件id",
  },
  {
    name: "this",
    detail: "获取组件实例",
  },
  {
    name: "e",
    detail: "触发对应生命周期时接收的参数",
  },
  {
    name: "components",
    detail:
      "当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制",
  },
  {
    name: "node_modules",
    detail: "获取插件，const {echarts, element} = node_modules",
  },
]);
let clickStrError = ref([]);
let mouseenterStrError = ref([]);
let beforeMountStrError = ref([]);
let mountedStrError = ref([]);
let dataObj = computed(() => ({
  clickMethod: clickStr.value,
  mouseenterMethod: mouseenterStr.value,
  beforeMountMethod: beforeMountStr.value,
  mountedMethod: mountedStr.value,
}));
watch(
  () => props.layout,
  () => {
    clickStr.value = props.layout.eventMethods.clickMethod;
    mouseenterStr.value = props.layout.eventMethods.mouseenterMethod;
    beforeMountStr.value = props.layout.eventMethods.beforeMountMethod;
    mountedStr.value = props.layout.eventMethods.mountedMethod;
  },
  { deep: true, immediate: true }
);

let dialogVisible = ref(false);
let activeName = ref("click");

const currentError = computed(() => {
  switch (activeName.value) {
    case "click":
      return clickStrError.value;
    case "mouseenter":
      return mouseenterStrError.value;
    case "BeforeMounted":
      return beforeMountStrError.value;
    case "mounted":
      return mountedStrError.value;
    default:
      return [];
  }
});
const confirm = () => {
  if (
    clickStrError.value.length > 0 ||
    mouseenterStrError.value.length > 0 ||
    beforeMountStrError.value.length > 0 ||
    mountedStrError.value.length > 0
  ) {
    ElMessage.error("请检查代码错误");
    return;
  }
  emit("updateData", dataObj.value);
};
const close = () => {
  dialogVisible.value = false;
  emit("close");
};
const changeclickMethod = (value) => {
  clickStr.value = value;
};

const changemouseenterMethod = (value) => {
  mouseenterStr.value = value;
};

const changebeforeMountMethod = (value) => {
  beforeMountStr.value = value;
};

const changemountedMethod = (value) => {
  mountedStr.value = value;
};
const handleClickError = (err) => {
  clickStrError.value = err;
};
const handleMouseEnterError = (err) => {
  mouseenterStrError.value = err;
};
const handlBeforMountedError = (err) => {
  beforeMountStrError.value = err;
};
const handleMountedError = (err) => {
  mountedStrError.value = err;
};
defineExpose({
  dialogVisible,
});
</script>

<style scoped lang="scss"></style>
